<template>
    <div class='confirmPay'>
        <el-dialog title="支付" visible @close="$emit('close')" width="600px" append-to-body :close-on-click-modal="false">
            <div class="fade">
                <span>￥{{ pay_amount }}</span>
            </div>
            <!--支付方式-->
            <div>
                <div class="payment">
                    <div class="payment_box">
                        <div class="zf_box">选择支付方式：</div>

                        <div class="payment_middle" v-for='(item, index) in paymentList' :key="index">
                            <div class="payment_left">
                                <img :src="item.payment_icon" alt="">
                            </div>
                            <div class="payment_right" @click="clickRadio(item, index)">
                                <p>{{ item.payment_name }}</p>
                                <div class="change-icon" v-show="radioVal == index">
                                    <i class="el-icon-success" style="color: rgb(5, 182, 5);"></i>
                                </div>
                                <div class="change-icon" v-show="radioVal !== index">
                                    <i class="el-icon-circle-check" style="color: #9f9f9f;"></i>
                                </div>
                            </div>
                        </div>

                        <!-- <div class="payment_middle">
                            <div class="payment_left">
                                <img src="../../../assets/img/wx_pay.png" alt="">
                            </div>
                            <div class="payment_right" @click="clickRadio(2)">
                                <p>微信</p>
                                <img src="../../../assets/img/wx_pay.png" alt="" v-show="radioVal === 2">
                                <div class="change-icon" v-show="radioVal == 2">
                                    <i class="el-icon-success" style="color: rgb(5, 182, 5);"></i>
                                </div>
                                <div class="change-icon" v-show="radioVal !== 2">
                                    <i class="el-icon-circle-check" style="color: #9f9f9f;"></i>
                                </div>
                            </div>
                        </div> -->

                    </div>
                </div>
            </div>
            <!-- <div ref="alipayWap" v-html="alipay"/> -->
            <el-dialog :visible.sync="innerVisible" width="350px" title="微信支付" @close="closeCode" append-to-body>
                <div style="display: flex; justify-content: center; align-items: center;">
                    <div class="wechatMask">
                        <!-- :close-on-click-modal="false" v-if="codeImg"  v-if="orderList.orderDetails" forderList.orderDetails.totalPrice 
                         @click="refreshWechatCode" @click="handleFinished" @click="repeatPay" :show-close="false"-->
                        <h4>订单总额:{{ payAmount }}</h4>
                        <div id="qrcode" ref="qrcode" style="margin-top: 20px ;"></div>
                        <!-- <canvas ref="canvas"></canvas> -->
                        <!-- <img src="../../../assets/img/code.png" alt="" /> -->
                        <!-- <el-button type="text"> 点击刷新二维码 </el-button> -->
                        <div class="wechat-box" style="margin-top: 30px;">
                            <el-button type="success" plain round>支付完成</el-button>
                            <!-- <el-button type="info" plain round>重新支付</el-button> -->
                        </div>
                    </div>
                </div>
            </el-dialog>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submit">立即支付</el-button>
                <el-button @click="close()">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { getPaymentLists, goConfirmPay } from "@/api/purchaseOrder/purchase.js"
import throttle from 'lodash.throttle'
import QRCode from "qrcodejs2";
// import QRCode from "qrcode";
export default {
    name: 'confirmPay',
    props: {
        payAmount: String,
        orderNo: String,
        // data: {
        //     type: Object,
        //     default: function () {
        //         return {}
        //     }
        // }

    },
    components: {
        // quillEditor
    },
    data() {
        return {
            radioVal: 100,
            html: '',
            innerVisible: false,
            codeImg: '',
            paymentList: [],
            pay_amount: '',
            payment_id: '',
            payment_name: '',
            alipay: '',
            url: '',
            canvas: {},
            request_url:''
            // formLoading: false,
        }
    },
    created() {
        console.log(this.payAmount, "付款额")
        this.getList()
    },
    methods: {
        getList() {
            getPaymentLists({ order_no: this.orderNo }).then(res => {
                this.paymentList = res.data.order_payment;
                this.pay_amount = res.data.order_price
            });
        },
        clickRadio(item, index) {
            if (this.radioVal === index) {
                this.radioVal = 100;
            } else {
                this.radioVal = index;
                this.payment_id = item.payment_id;
                this.payment_name = item.payment_name;
                if(this.payment_name == '支付宝支付'){
                    this.request_url = item.request_url
                }
            }

        },
        // onEditorChange({ editor, html, text }) {
        //     this.form.content = html;
        //     // console.log(this.form.content)
        // },
        close() {
            this.form = {};
            this.$emit('close');
        },
        // 关闭弹框,清除已经生成的二维码
        closeCode() {
            this.innerVisible = false;
            this.$refs.qrcode.innerHTML = "";
        },
        crateQrcode() {
            this.qr = new QRCode("qrcode", {
                width: 180,
                height: 180, // 高度
                text: this.qrcode, // 二维码内容
                background: "#f0f",
                correctLevel: 3
            });
        },
        submit() {
            if (this.radioVal == 100) {
                this.$confirm('请选择支付方式', "警告", {
                    confirmButtonText: "确定",
                    type: "warning"
                })
            } else if (this.payment_name == '支付宝支付') {
                window.open(this.request_url)
                    this.$emit('close');
                // this.$router.push({
                //     path:'/alipay',
                //     query:{
                //         order_no: this.orderNo,
                //         payment_id: this.payment_id
                //     }
                // })
                // const { href } = this.$router.resolve({path:`/alipay/?order_no=${this.orderNo}&payment_id=${this.payment_id}`})
                //     window.open(href, '_blank') // _blank 打开新的页面
                // let params = {
                //     order_no: this.orderNo,
                //     payment_id: this.payment_id
                // }
                // goConfirmPay(params).then((res) => {
                //     // console.log(this.$store.state.user.token, '000')
                //     // window.open('res.data.url?token='+this.$store.state.user.token)
                //     window.open(res.data.url)
                    
                //     // // 渲染支付页面
                //     // this.alipay = res.data;
                //     // // // 防抖避免重复支付
                //     // this.$nextTick(() => {
                //     //     // 提交支付表单
                //     //     this.$refs.alipayWap.children[0].submit();
                //     //     setTimeout(() => {
                //     //         // this.toPayFlag = false;
                //     //     }, 500);
                //     // });
                // })
            }
            else if (this.payment_name == '微信支付') {
                let params = {
                    order_no: this.orderNo,
                    payment_id: this.payment_id
                }
                goConfirmPay(params).then((res) => {
                    console.log(res.data.pay_data.wxpcpay_data, "9999")
                    this.qrcode = res.data.pay_data.wxpcpay_data.code_url
                    this.$nextTick(() => {
                        this.crateQrcode();
                        this.timer = setInterval(() => {    // 通过定时器每间隔一会去请求查询微信支付状态（具体参数根据项目需要而定）
                            // this.handleQueryWxPayStatus(row, res.data.outTradeNo);
                        }, 1000);
                    });

                })
                this.innerVisible = true
            }

            // payTwoHundred({}).then((res) => {
            //     // 渲染支付页面
            //     this.alipay = res.data;
            //     // 防抖避免重复支付
            //     this.$nextTick(() => {
            //         // 提交支付表单
            //         this.$refs.alipayWap.children[0].submit();
            //         setTimeout(() => {
            //             // this.toPayFlag = false;
            //         }, 500);
            //     });
            // })
        },

        handleQueryWxPayStatus(row, sn){  // 查询微信支付状态
            // this.$api.order.queryWxPayStatus({    // 这里根据不同的后端接口去修改
            //     totalFee: row.totalAmount * 100,
            //     outTradeNo: sn,
            // }).then(res => {
            //     if(res.data.paySuccess){    // 当查询到支付成功时
            //         this.$message({
            //             type: 'success',
            //             message: '支付成功！'
            //         });
            //         this.closePayDialog();    // 关闭支付弹窗
            //         // 这里可以加个刷新订单列表的接口请求函数的调用
            //     }
            // })
        },

        repeatPay() {
            this.wechatPayMask = !this.wechatPayMask
            this.codeImg = abaseUrl + '/order/getlxPay.do?orderId=' + this.payTemp.orderId + '&time=' + new Date().getTime();
        },

        refreshWechatCode() {
            this.codeImg = abaseUrl + '/order/getlxPay.do?orderId=' + this.payTemp.orderId + '&time=' + new Date().getTime();
        }
    },
}

</script>
<style scoped lang='scss'>
.fade {
    width: 85%;
    height: 6rem;
    background: #fef7eb;
    margin: 0 auto;
    // margin-top: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #f2591d;
    font-size: 30px;
    font-weight: bold;
}

.payment {
    // width: 84%;
    height: 10rem;
    border-radius: 0.5rem;
    background: #fff;
    margin: 0 auto;
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    // border: 1px solid rgba(224, 224, 224, 1) ;
}

.payment_box {
    width: 85%;
}

.payment_left {
    display: flex;
}

.payment_left img:first-child {
    width: 6.0rem;
    height: 2.0rem;
}

.zf_box {
    height: 2.5rem;
    border-bottom: 1px solid rgba(224, 224, 224, 1);
    display: flex;
    text-align: center;
    line-height: 2.3rem;
    font-size: 0.9rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(102, 102, 102, 1);
    width: 95%;
}

.payment_right {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(224, 224, 224, 1);
    width: 65%;
    padding-left: 10px;
}

.payment_right img {
    width: 1rem;
    height: 1rem;
}

.change-icon {
    font-size: 20px;
}

.payment_middle {
    justify-content: space-around;
    display: flex;
    margin-top: 1rem;
}

.payment_middle p {
    font-size: 0.8rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
}

.wechatMask {
    align-items: center;
    justify-content: center;
    text-align: center;
}
</style>